<template>
	<div id="campus_info" class="container">
		<div class="content">
			<!-- <div class="title">{{title}}</div> -->
			<div class="panel">
	
				<div class="title_info">基本信息</div>
				<el-form :model="param" ref="param" :label-width="labelWidth">
					<el-form-item label="校区名称" :rules="[{ required: true, message: ''}]">
						<el-input style="width: 4.5rem" clearable v-model="param.name" :disabled="true" placeholder="请输入校区名称"></el-input>
					</el-form-item>
					<el-form-item label="校区电话">
						<el-input style="width: 4.5rem" :disabled="!isEdit" clearable v-model="param.tel" maxlength="12" placeholder="请输入校区电话，如：020-12345678"></el-input>
					</el-form-item>
					<el-form-item label="校区logo">
						<el-upload class="avatar-uploader" style="margin-top:0.36rem;" :action="uploadUrl" :show-file-list="false" :disabled="!isEdit" :data="uploadData" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :on-error="uploadError" accept=".jpg, .png">
							<img @click="clickPic(false)" v-if="imgUrl_44" :src="imgUrl_44" class="avatar" />
							<img @click="clickPic(false)" :disabled="!isEdit" src="../../assets/img/system_set/def_logo1.jpg" v-else />
							<div slot="tip" class="el-upload__tip" style="line-height: 0.3rem;margin-top:-0.1rem;font-size:0.14rem;">44x44</div>
						</el-upload>
						<el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :disabled="!isEdit" :data="uploadData" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="headers" :on-error="uploadError" accept=".jpg, .png"><img @click="clickPic(true)" v-if="imgUrl_202" :src="imgUrl_202" class="avatar" />
							<img @click="clickPic(true)" :disabled="!isEdit" src="../../assets/img/system_set/def_logo2.jpg" v-else />
							<div slot="tip" class="el-upload__tip" style="line-height: 0.3rem;margin-top:-0.1rem;font-size:0.14rem;padding-left:0.7rem">210x82</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="校区所在地区" :rules="[{ required: true, message: ''}]">
						<el-cascader style="width: 4.5rem" clearable :disabled="!isEdit" :props="defaultProps" :options="citys" v-model="param.regionAddress"></el-cascader>
					</el-form-item>
					<el-form-item label="校区详细地址">
						<el-input style="width: 4.5rem" clearable :disabled="!isEdit" maxlength="50" v-model="param.address" placeholder="请输入校区详细地址"></el-input>
					</el-form-item>
					<el-form-item label="校长姓名" :rules="[{ required: true, message: ''}]">
						<el-input style="width: 4.5rem" clearable :disabled="true" v-model="param.contactsName" placeholder="请输入校长姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号" :rules="[{ required: true, message: ''}]">
						<el-input style="width: 4.5rem" clearable :disabled="true" v-model="param.contactsTel"
							 maxlength="11" @input="getNum" placeholder="请输入校长手机号，并为该校区管理员账号">
						</el-input>
					</el-form-item>
					<el-form-item label="合作类型" :rules="[{ required: true, message: ''}]">
						<el-select style="width: 4.5rem" :disabled="true" v-model="param.cooperationMode" clearable placeholder="请选择合作类型">
							<el-option v-for="item in cooperationModeList" :key="item.name" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="服务期限" v-if="param.cooperationMode != 2" :rules="[{ required:true, message: ''}]">
						<el-row style="width: 4.5rem">
							<el-col :span="10">
								<el-date-picker type="date" :disabled="true" placeholder="开始日期" v-model="param.serveStartTime" style="width: 100%;"></el-date-picker>
							</el-col>
							<el-col style="text-align: center;" :span="3">-</el-col>
							<el-col :span="11">
								<el-date-picker type="date" :disabled="true" placeholder="结束日期" v-model="param.serveEndTime" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-row>
					</el-form-item>

					<el-form-item label="备注">
						<el-input style="width: 4.5rem" clearable :disabled="!isEdit" maxlength="50" v-model="param.remark" placeholder="请输入补充说明信息"></el-input>
					</el-form-item>
				</el-form>
				<div class="line_from"></div>
				<div class="title_info">家校通信息</div>
				
				<div class="label">授权后赋能：</div>
				<div class="enabling">通过将校区【微信公众号】开放平台账号管理授权给【威校管理平台】，校区可获得：
					1、获得校区的【家校通】，校区家长可在【校区微信公众号】访问家校通，获知孩子在校学习情况；
					2、家长报课后，关注【校区微信公众号】，可获得“上课、续费“等消息通知；
				</div>
				<div class="label">授权步骤：</div>
				<div class="step">
					<div class="step_text" style="padding-top: 0.14rem;line-height: 0.18rem;">
						<div>1</div>
						<div>配置</div>
						<div>威校域名</div>
					</div>
					<div class="step_line"></div>
					<div class="step_text">
						<div>2</div>
						<div>扫码授权</div>
					</div>
					<div class="step_line"></div>
					<div class="step_text">
						<div>3</div>
						<div>配置APPID</div>
					</div>
					<div class="step_line"></div>
					<div class="step_text">
						<div>4</div>
						<div>授权成功</div>
					</div>
				</div>
				<div class="step_detail" @click="openStepDetail()">查看详细操作步骤</div>
				
				<el-form :label-width="labelWidth">
					<el-form-item label="校区公众号APPID">
						<el-input style="width: 4.5rem" clearable :disabled="!isEdit" maxlength="50" v-model="param.appId" placeholder="请输入校区公众号ID"></el-input>
						<!--&nbsp;
						<span class="appId_explain" @click="gotoHtml()">如何获取公众号ID?</span>-->
					</el-form-item>
					<el-form-item v-if="param.appId" label="微信校验文件信息" :rules="[{ required: true, message: ''}]">
						<el-input style="width: 4.5rem" clearable :disabled="!isEdit" maxlength="50" v-model="param.wechatCheckFileMsg" placeholder="请输入微信校验文件信息"></el-input>
					</el-form-item>
				</el-form>
				
				<template v-if="hasApi('campusUpdate')">
					<div class="btn_div" v-if="isEdit">
						<div class="btn_sure" @click="sure()">保 存</div>
						<div class="btn_cancel" @click="cancel()">取 消</div>
					</div>
					<div class="btn_div" v-else>
						<div class="btn_sure" @click="isEdit=true;">编 辑</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import citys from "@/../static/citys.json";
	var vm,user,dict;

	export default {
		data: function() {
			return {
				title: this.$route.name,
				labelWidth : 5.14*rem + 'px',
				isEdit : false,
				uploadData: {
					content: "campuslogo"
				},
				citys: citys,
				isTwo: false,
				imgUrl_44: "",
				imgUrl_202: "",
				param: {},
				param2: {},
				cooperationModeList: [],
				uploadUrl: config.baseUrl + "file/upload",
				defaultProps: {
					label: "label",
					value: "value",
					children: "children"
				},
				headers: {
					token: tool.getItem(lsKey.token)
				}
			};
		},
		methods: {
			openStepDetail() {
				window.open("res/doc/指引微信公众号授权文档.pdf", "_blank");
			},
			clickPic(isTwo) {
				vm.isTwo = isTwo;
			},
			getNum(e) {
				vm.param.contactsTel = e.replace(/[^\d]/g, "");
			},
			uploadError: function(response, file) {
				console.log("上传文件失败response" + response);
			},
			handleAvatarSuccess(res, file) {
				if(res.status != "success") {
					this.$message.error("上传文件失败，" + res.data.result);
				} else {
					if(!vm.isTwo) {
						this.imgUrl_44 = res.data.url;
					} else {
						this.imgUrl_202 = res.data.url;
					}
				}
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === "image/jpeg" || "image/png";
				const isLt2M = file.size / 1024 / 1024 < 2;

				if(!isJPG) {
					this.$message.error("上传logo图片只能是 JPG/PNG 格式!");
					return false;
				}
				if(!isLt2M) {
					this.$message.error("上传logo图片大小不能超过 2MB!");
					return false;
				}
				let fontSize;
				if(!vm.isTwo) {
					fontSize = "44x44";
				} else {
					fontSize = "210x82";
				}

				const isSize = new Promise(function(resolve, reject) {
					let width = fontSize.split("x")[0];
					let height = fontSize.split("x")[1];
					let _URL = window.URL || window.webkitURL;
					let image = new Image();
					image.onload = function() {
						let value = image.width == width && image.height == height;
						value ? resolve() : reject();
					};
					image.src = _URL.createObjectURL(file);
				}).then(
					() => {
						return file;
					},
					() => {
						tool.message({
							showClose: true,
							message: "上传logo图片尺寸不符合，应为" + fontSize,
							type: "warning"
						});
						return Promise.reject();
					}
				);
				return isSize;
			},
			campusChange : function() {
				vm.search();
			},
			search : function() {
				var campusId = vm.$store.state.campusId;
				api.campusInfo({campusId}).then(function(data) {
					//获取机构对象
					var d = data.campus;
					//处理地址
					d.regionAddress = [d.province, d.city, d.area];
					//处理图片
					if(d.icon) {
						vm.imgUrl_44 = d.icon.split(",")[0];
						vm.imgUrl_202 = d.icon.split(",")[1];
					} else {
						vm.imgUrl_44 = "";
						vm.imgUrl_202 = "";
					}
					
					vm.param = d;
					vm.param2 = tool.clone(d);
				})
			},
			cancel: function() {
				vm.param = tool.clone(vm.param2);
				vm.isEdit = false;
			},
			sure: function() {
				
				var rules = [{			
					judge : (vm.imgUrl_44 && vm.imgUrl_202) || vm.imgUrl_44 == vm.imgUrl_202,
					tips : "如需上传机构logo，则必须上传两种分辨率的logo"
				},{			
					judge : !(vm.param.appId && !vm.param.wechatCheckFileMsg),//有公众号Id,没有校验文件
					tips : "请输入微信校验文件信息"
				},{
					judge : vm.param.regionAddress[0], //有选地址  
					tips : "请选择校区所在的省市区"
				}]
				if(!tool.validate(rules)) {
					return;
				}
				
				//拼接图片logo和区域
				vm.param.province = vm.param.regionAddress[0];
				vm.param.city = vm.param.regionAddress[1];
				vm.param.area = vm.param.regionAddress[2];
				if(vm.imgUrl_44 != "") {
					vm.param.icon = vm.imgUrl_44 + "," + vm.imgUrl_202;
				}
				api.campusUpdate(vm.param).then(function(data) {
					//重新查询
					vm.search();
					tool.message({message: "保存成功", type: "success"});
					vm.isEdit = false;
				});
			}
		},
		created: function() {
			vm = this;
			user = tool.getItem(lsKey.user, true); //得到当前用户信息
			
			//获取数据字典
			dict = tool.getItem(lsKey.dict, true);
			vm.cooperationModeList = dict["cooperation_mode"];
			
			vm.search();
		}
	};
</script>
<style lang="scss">
#campus_info {
	.el-form-item__label {
		font-size: 0.16rem !important;
	}
	.el-input__inner {
		font-size: 0.16rem !important;
	}
	.el-form-item {
		margin-bottom: 0.18rem !important;
	}
}
</style>
<style scoped src="@/style/system_set/campus_info.css"></style>